<template>
  <div class="ma-content-block  p-4">

<div class="content w-full lg:ml-4 mt-5 lg:mt-0">
  <a-card  title="系统配置" hoverable>
    <ma-form v-model="form"
             :columns="formColumnsOptions"
             :options="formOptions"
             @onSubmit="submit"
             ref="crudForm" />
  </a-card>
</div>
  </div>

</template>

<script setup>
import {reactive, ref,onMounted} from "vue";
import Api from "@/api/system"
import {Message} from "@arco-design/web-vue";
const crudRef = ref()
const record = ref()
const form = ref()
// 组件的字段设置
const formColumnsOptions = reactive([
  {
    title: '是否开启系统代理',
    dataIndex: 'is_agent',
    formType: 'radio',
    dict: {
      data:[
        { label: '启用', value: 1 },
        { label: '关闭', value: 0 }
      ],
      // 对数据进行字典翻译
      translation: true
    },
    addDefault:0,
    control: (val) => {
      return {
        agent_url: { display: val == 1 },
      }
    }
  },
  {
    title: '代理地址',
    formType:'input',
    dataIndex: 'agent_url'
  }
])
const formOptions = ref({
  resetShowBtn:false
})
onMounted(() => {
  init()
})
function init(){
  Api.getAll().then(response => {
    console.log(response)
    if(response.success){
      form.value =response.data
    }
  })
}
function submit(data,done){
  Api.save(data).then(response => {
    if(response.success){
      Message.success('保存成功')
    }else{
      console.log(response)
      Message.error("保存失败")
    }
  })
}
</script>

<style scoped>
.content{
  min-width: 500px;
}
</style>